
import React, { memo, useEffect, useState } from 'react';



import cs from 'classnames';


import { shallowEqual, useDispatch, useSelector } from 'react-redux';

import { getArtistListAction } from '../../../../store/actionCreators'
import { singerAlp } from '@/utils/handle-data'
import sty from './sty.module.css';


const AlpList = () => {
  const [currentApl, setCurrentApl] = useState('-1');
  const { currentType, currentArea } = useSelector(state => ({
    currentArea: state.getIn(['artist', 'currentArea']),
    currentType: state.getIn(['artist', 'currentType'])
  }), shallowEqual)

  const dispatch = useDispatch()
  useEffect(() => {

    setCurrentApl('-1')
  }, [currentArea, currentType])
  useEffect(() => {

    dispatch(getArtistListAction(currentArea, currentType.type, currentApl))
  }, [currentApl, currentType, currentArea, dispatch])



  return <div className={sty.alpList}>
    {
      currentArea !== -1 && singerAlp.map((v, i) => {
        return (<div key={v.title} className={cs(sty.alpItem, { 'alp-active': currentApl === v.alpha })}>
          <span onClick={e => setCurrentApl(v.alpha)}>{v.title}</span>
        </div>)
      })
    } </div>
}
export default memo(AlpList)